<template>
	<view class="style-wrap" :style="{height:`${height - top}px`}">
		<view class="box"
		:style="{
			width:`${width}%`,height:height+'px',top:`-${top}px`,
			'background-color':backcolor,'background-image':`linear-gradient(${deg}deg,${startcolor},${endcolor})`,
		}"
		
		></view>
	</view>
</template>

<script>
	export default{
		props:{
			top:{
				default:'50'
			},
			width:{
				default:'180'
			},
			height:{
				default:'200'
			},
			backcolor:{
				default:'#007AFF'
			},
			deg:{
				default:'180'
			},
			startcolor:{},
			endcolor:{}
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.style-wrap{
		width: 100%;
		//height: 300px;
		display: flex;
		justify-content: center;
		background-color: #4CD964;
		position: relative;
		overflow: hidden;
		&::after{
			content: "";
			display: block;
			clear: both;
		}
		.box{
			 //width: 180%;
			// height: 200px;
			border-radius: 100%;
			position: absolute;
			// top: -50px;
			background-color: #007AFF;
		}
	}
</style>
